@directive dynamic roles,genders;
@var content = {
<div class="panel panel-success">
    <div class="panel-body">
        <form action="#" method="POST" class="form-horizontal" role="form" id="add-form">
            <div class="form-group">
                <img id="img-avatar" src="${ctxPath}/static/images/user.png" alt="${ctxPath}/static/images/user.png" class="img-responsive center-block img-circle" style="height: 100px;">
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name"
                           placeholder="输入用户名" required data-bv-notempty-message="用户名不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="用户名在两到十个字符之间"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="nick" name="nick"
                           placeholder="输入昵称" required data-bv-notempty-message="昵称不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="模块名称在两到十个字符之间"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">头像</label>
                <div class="col-sm-8">
                    <input type="hidden" id="avatar" name="avatar" class="form-control">
                    <input class="form-control" id="file" name="file" type="file">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">电子邮箱</label>
                <div class="col-sm-8">
                    <input type="email" class="form-control" id="email" name="email"
                           placeholder="输入电子邮箱" required data-bv-notempty-message="电子邮箱不为空"
                           pattern="^.{2,100}$" data-bv-regexp-message="电子邮箱不正确"
                           data-bv-emailAddress-message="电子邮箱不正确"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">性别</label>
                <div class="col-sm-8">
                    <div class="radio">
                        @for(gender in genders){
                        <label>
                            <input type="radio" required name="gender" id="gender${gender.value}" value="${gender.value}"
                                   data-bv-notempty-message="请选择性别"/>
                            ${gender.name}
                        </label>
                        @}
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">出生日期</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="birthday" name="birthday"
                           placeholder="出生日期" required data-bv-notempty-message="出生日期" autocomplete="off"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-8">
                    <textarea class="form-control" id="address" name="address"
                              placeholder="输入地址" required data-bv-notempty-message="地址不为空"
                              pattern="^.{2,1000}$" data-bv-regexp-message="地址在两到一千个字符之间"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="roleId">角色</label>
                <div class="col-sm-8">
                    <select id="roleId" name="roleId" class="form-control" data-live-search='true' required data-bv-notempty-message="请选择角色">
                        <option value=""> -- 选择角色 --</option>
                        @for(role in roles){
                        <option value="${role.id}"> -- ${role.name} --</option>
                        @}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-8">
                    <input type="password" name="password" required class="form-control" id="password"
                           placeholder="请输入密码"
                           data-bv-notempty-message="密码不能为空"
                           data-bv-different="true" data-bv-different-field="name"
                           data-bv-different-message="密码不能和用户名一样"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-8">
                    <input type="password" name="password1" required class="form-control" id="password1"
                           placeholder="输入确认密码"
                           data-bv-notempty-message="密码不能为空"
                           data-bv-identical="true" data-bv-identical-field="password"
                           data-bv-identical-message="两次输入的密码不一样"/>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="text-center col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
                <button class="btn btn-success" id="btn-add" onclick="view.submit();">添加</button>
                <button class="btn btn-warning" id="btn-close" onclick="parent.table.bootstrapTableExtension('close');">取消</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            view.init();
        });
        var view = {
            init: function () {
                $('#file').fileUpload({
                    msgPlaceholder: '请选择图片文件',
                    uploadUrl: '${ctxPath}/common/upload/upload',
                    uploadSuccess: function (data) {
                        //文件上传成功，返回文件上传路径，//可以做相应的处理
                        $('#avatar').val(data);
                        $('#img-avatar').attr('src', '${ctxPath}' + data);
                    }
                });
                laydate.render({
                    elem: '#birthday', //指定元素
                    type: 'datetime',
                    trigger: 'click',
                    done: function (value, date) {
                        $('#birthday').val(value);
                        $('#add-form').data('bootstrapValidator').updateStatus('birthday', 'VALIDATED');
                        $('#add-form').data('bootstrapValidator').validateField('birthday');
                    }
                });
                $('#roleId').selectpicker();
                $('#add-form').bootstrapValidator({
                    message: '值不能为空',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        name: {
                            validators: {
                                threshold: 1,
                                remote: {
                                    url: '/sys/user/userExist',//验证地址
                                    message: '该用户名已被占用',//提示消息
                                    delay: 1000,
                                    type: 'get',
                                }
                            }
                        },
                        email: {
                            validators: {
                                threshold: 1,
                                remote: {
                                    url: '/sys/user/emailExist',//验证地址
                                    message: '该邮箱已存在',//提示消息
                                    delay: 1000,
                                    type: 'get',
                                }
                            }
                        }
                    }
                });

                $('#add-form').on('submit', function () {
                    return false;
                });
                $('#parentMenuName').on('focus', function () {
                    $('#modal-parent-menu').modal();
                });
            },
            submit: function () {
                $('#add-form').data('bootstrapValidator').validate();
                var b = $('#add-form').data('bootstrapValidator').isValid();
                if (!b) {
                    return false;
                }
                var files = $('#file').fileUpload('getUploadFiles');
                if (files.length > 0) {
                    $('#avatar').val(files[files.length - 1].path);
                } else {
                    $('#avatar').val('');
                }
                $('#btn-add').attr('disabled', 'disabled');
                $.ajax({
                    url: '${ctxPath}/sys/user/add',
                    type: 'post',
                    dataType: 'json',
                    data: $('#add-form').serialize(),
                    success: function (data) {
                        if (data.status) {
                            layer.msg(data.msg, {icon: 1});
                            parent.table.bootstrapTable('refresh');
                            setTimeout(function () {
                                parent.table.bootstrapTableExtension('close');
                            }, 1500);
                        } else {
                            layer.msg(data.msg, {icon: 1});
                            $('#btn-add').removeAttr('disabled');
                        }
                    },
                    error: function () {
                        layer.msg('网络错误，请稍后再试', {icon: 5});
                        $('#btn-add').removeAttr('disabled');
                    }
                });
            }
        };
    </script>
</div>
@};
@include('../../layout/_open_content.html',{content:content}){}